<template>
  <div class="Monitor">
  	<el-tabs v-model="activeName" @tab-click="tabClick">
  	    <el-tab-pane label="视频监控" name="1" class="monitorVideo">
  	    	<el-container>
  	    	  <el-aside width="400px" class="laside">
  	    	  	<div class="MVideo_LAside_title">设备列表</div>
  	    	  	<div class="MVideo_LAside_content">
  	    	  		<el-table :data="tableData1" height="776" style="width: 100%" :header-cell-style="{background:'#F3F4F7'}">
  	    	  		    <el-table-column prop="id" label="编号" align="center"></el-table-column>
  	    	  		    <el-table-column prop="roadName" label="位置分布" align="center"></el-table-column>
  	    	  		    <el-table-column prop="videoStatus" label="状态" align="center"></el-table-column>
  	    	  		    <el-table-column label="操作" align="center">
  	    	  		    	<el-button size="mini" @click="VideoControl">查看</el-button>
  	    	  		    </el-table-column>
  	    	  		</el-table>
  	    	  	</div>
  	    	  </el-aside>
  	    	  <el-main>
  	    	  	<div class="MVideo_LAside_title">视频墙</div>
  	    	  	<el-row>
  	    	  	  <el-col
					:xs="8" 
	  	    		:sm="8" 
	  	    		:md="8" 
	  	    		:lg="8" 
	  	    		:xl="8"  
					v-for="(item,index) in 10" 
					:key="index">
  	    	  	  	<div class="main_wrapper" @click="chooVideo">
  	    	  	  		<div class="main_title">
  	    	  	  			<span>学院一路</span>
  	    	  	  			<span>11:30</span>	
  	    	  	  		</div>
  	    	  	  		<div class="main_content"></div>
  	    	  	  	</div>
  	    	  	  </el-col>
  	    	  	  <el-col
					:xs="8" 
	  	    		:sm="8" 
	  	    		:md="8" 
	  	    		:lg="8" 
	  	    		:xl="8">
  	    	  	  	<div class="main_add" @click="addVideo">+</div>
  	    	  	  </el-col>
  	    	  	</el-row>
  	    	  </el-main>
  	    	  <el-aside width="200px" class="raside">
  	    	  	<div class="MVideo_LAside_title">设备信息</div>
  	    	  	<div class="raside_content">
  	    	  		<div class="raside_content_item raside_warning">
  	    	  			<p class="rtitel">预警信息：</p>
  	    	  			<p>报警级别：<span class="warningLevel">高级</span></p>
  	    	  			<p>起始时间：09-02 11：30</p>
  	    	  			<p>报警位置：学院1路3号</p>
  	    	  		</div>
  	    	  		<div class="raside_content_item machineDesc">
  	    	  			<p class="rtitel">设备信息：</p>
  	    	  			<p>名称：学院1路摄像头</p>
  	    	  			<p>型号：SBLHYBH01</p>
  	    	  			<p>位置：学院1路</p>
  	    	  		</div>
  	    	  		<div class="raside_content_item">
  	    	  			<p class="rtitel">联系信息：</p>
  	    	  			<p>应急联系人：王XX</p>
  	    	  			<p>联系方式：13525246582</p>
  	    	  			<p>所属部门：监督中心</p>
  	    	  			<p>职务：管理员</p>
  	    	  		</div>
  	    	  	</div>
  	    	  </el-aside>
  	    	</el-container>
  	    </el-tab-pane>
  	    <!-- <el-tab-pane label="设备管理" name="2">
  	    	<el-form :model="addVideoForm" label-width="100px" class="addVideo_form">
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<h4>设备部署</h4>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="设备名称：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="设备型号：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="部署位置：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="设备管理员：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="联系方式：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="所属部门：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="职位岗位：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="24" class="xxx_col">
	  					<el-form-item label="部署时间：">
	  						<el-date-picker
						      v-model="datevalue1"
						      type="date"
						      placeholder="开始日期"
						      :picker-options="pickerOptions1">
						    </el-date-picker>
						    -
						    <el-date-picker
						      v-model="datevalue2"
						      type="date"
						      placeholder="结束日期"
						      :picker-options="pickerOptions2">
						    </el-date-picker>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-form-item>
	  				<el-button type="primary">确认</el-button>
	  				<el-button>取消</el-button>
	  			</el-form-item>
	  		</el-form>
	  		<el-form :model="addVideoForm" label-width="100px" class="addVideo_form">
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<h4>设备部署</h4>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="设备名称：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="设备型号：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="12" class="xxx_col">
	  					<el-form-item label="部署位置：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="设备管理员：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="联系方式：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="所属部门：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  				<el-col :span="10" class="xxx_col">
	  					<el-form-item label="职位岗位：">
	  						<el-input type="text" v-model="form"></el-input>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-row :gutter="20" class="xxx_row">
	  				<el-col :span="24" class="xxx_col">
	  					<el-form-item label="部署时间：">
	  						<el-date-picker
						      v-model="datevalue1"
						      type="date"
						      placeholder="开始日期"
						      :picker-options="pickerOptions1">
						    </el-date-picker>
						    -
						    <el-date-picker
						      v-model="datevalue2"
						      type="date"
						      placeholder="结束日期"
						      :picker-options="pickerOptions2">
						    </el-date-picker>
	  					</el-form-item>
	  				</el-col>
	  			</el-row>
	  			<el-form-item>
	  				<el-button type="primary">确认</el-button>
	  				<el-button>取消</el-button>
	  			</el-form-item>
	  		</el-form>
  	    </el-tab-pane> -->
  	    <el-tab-pane label="统计分析" name="3">
  	    	<el-row :gutter="20" class="currentTop_row">
  	    	    <el-col :span="6" class="currentTop_col">
  	    	        <div class="currentTop_col_item">
						<div class="chartTitle">统计图表</div>
						<div class="chartWrapper">
							<baseBarChart
							ref="Chart1"
							:legendData="legendData1"
			  	    		:xAxisData="xAxisData1"
			  	    		:seriesDatas="seriesDatas1"
			  	    		:XaxisLabelColor="'#000'"
			  	    		:YaxisLabelColor="'#000'"
			  	    		:gridTop="20"
			  	    		:Xrotate="75"
			  	    		:xAxisInterval="1"
			  	    		:XaxisLabelFontSize="9"
			  	    		:YaxisLabelFontSize="10"></baseBarChart>
						</div>
  	    	        </div>
  	    	    </el-col>
  	    	    <el-col :span="6" class="currentTop_col">
  	    	        <div class="currentTop_col_item">
						<div class="chartTitle">统计图表</div>
						<div class="chartWrapper">
							<baseLineChart
							ref="Chart2"
							:legendData="legendData2"
			  	    		:xAxisData="xAxisData2"
			  	    		:seriesDatas="seriesDatas2"
			  	    		:XaxisLabelColor="'#000'"
			  	    		:YaxisLabelColor="'#000'"
			  	    		:gridTop="20"
			  	    		:isShowYsplitLine="true"
			  	    		:Xrotate="75"
			  	    		:xAxisInterval="1"
			  	    		:XaxisLabelFontSize="9"
			  	    		:YaxisLabelFontSize="10"></baseLineChart>
						</div>
  	    	        </div>
  	    	    </el-col>
  	    	    <el-col :span="6" class="currentTop_col">
  	    	        <div class="currentTop_col_item">
						<div class="chartTitle">统计图表</div>
						<div class="chartWrapper">
							<basePieChart
							ref="Chart3"
							:LegendData="LegendData3"
							:seriesDatas="seriesDatas3"></basePieChart>
						</div>
  	    	        </div>
  	    	    </el-col>
  	    	    <el-col :span="6" class="currentTop_col">
  	    	        <div class="currentTop_col_item">
						<div class="chartTitle">统计图表</div>
						<div class="chartWrapper">
							<baseScatterChart
							ref="Chart4"
							:legendData="legendData4"
							:seriesData="seriesData4"></baseScatterChart>
						</div>
  	    	        </div>
  	    	    </el-col>
  	    	</el-row>
  	    	<el-row :gutter="10" class="hisTr_row">
  	    	    <el-col :span="16" class="hisTr_col">
  	    	        <div class="hisTr_col_item">
						<div class="hisTr_col_item_title">历史数据统计</div>
						<div class="hisTr_col_item_ChartWrapper">
							<baseBarChart
							ref="Chart5"
							:legendData="legendData5"
			  	    		:xAxisData="xAxisData5"
			  	    		:seriesDatas="seriesDatas5"
			  	    		:XaxisLabelColor="'#000'"
			  	    		:YaxisLabelColor="'#000'"
			  	    		:gridTop="20"
			  	    		:Xrotate="75"
			  	    		:XaxisLabelFontSize="9"
			  	    		:YaxisLabelFontSize="10"></baseBarChart>
						</div>
  	    	        </div>
  	    	    </el-col>
  	    	    <el-col :span="8" class="hisTr_col">
  	    	        <el-row :gutter="20" class="hisItem_row">
  	    	            <el-col :span="24" class="hisItem_col">
  	    	                <div class="hisItem_col_item">
								<div class="hisItem_col_item_title">历史数据统计</div>
								<div class="hisItem_col_item_ChartWrapper">
									<baseBarChart
									ref="Chart6"
									:legendData="legendData6"
					  	    		:xAxisData="xAxisData6"
					  	    		:seriesDatas="seriesDatas6"
					  	    		:XaxisLabelColor="'#000'"
					  	    		:YaxisLabelColor="'#000'"
					  	    		:gridTop="20"
					  	    		:Xrotate="75"
					  	    		:XaxisLabelFontSize="9"
					  	    		:YaxisLabelFontSize="10"></baseBarChart>
								</div>
  	    	                </div>
  	    	            </el-col>
  	    	        </el-row>
  	    	        <el-row :gutter="20" class="hisItem_row">
  	    	            <el-col :span="24" class="hisItem_col">
  	    	                <div class="hisItem_col_item">
								<div class="hisItem_col_item_title">历史数据统计</div>
								<div class="hisItem_col_item_ChartWrapper">
									<baseBarChart
									ref="Chart7"
									:legendData="legendData7"
					  	    		:xAxisData="xAxisData7"
					  	    		:seriesDatas="seriesDatas7"
					  	    		:XaxisLabelColor="'#000'"
					  	    		:YaxisLabelColor="'#000'"
					  	    		:gridTop="20"
					  	    		:Xrotate="75"
					  	    		:XaxisLabelFontSize="9"
					  	    		:YaxisLabelFontSize="10"></baseBarChart>
								</div>
  	    	                </div>
  	    	            </el-col>
  	    	        </el-row>
  	    	    </el-col>
  	    	</el-row>
  	    	<el-row :gutter="10" class="allCount_row">
  	    	    <el-col :span="7" class="allCount_col">
  	    	        <div class="allCount_col_item">
  	    	        	<div class="allCount_title">统计数据</div>
  	    	        	<div class="allCount_content">
  	    	        		<baseRadarChart
  	    	        		ref="Chart8"
							:seriesName="seriesName8"
							:indicatorData="indicatorData8"
							:seriesValue="seriesValue8"
							/>
  	    	        	</div>

  	    	        </div>
  	    	    </el-col>
				<el-col :span="7" class="allCount_col">
				    <div class="allCount_col_item">
				    	<div class="allCount_title">统计数据</div>
				    	<div class="allCount_content">
				    		<baseRadarChart
				    		ref="Chart9"
							:seriesName="seriesName9"
							:indicatorData="indicatorData9"
							:seriesValue="seriesValue9"
							/>
				    	</div>

				    </div>
				</el-col>
  	    	    <el-col :span="10" class="allCount_col">

					<el-row :gutter="10" class="allCountItem_row">
					    <el-col :span="12" class="allCountItem_col">
					        <div class="allCountItem_col_item">
					        	<div class="allCountItem_title">统计数据</div>
					        	<div class="allCountItem_content">
					        		<span>13524</span>
					        	</div>
					        </div>
					    </el-col>
					    <el-col :span="12" class="allCountItem_col">
					        <div class="allCountItem_col_item">
					        	<div class="allCountItem_title">统计数据</div>
					        	<div class="allCountItem_content">
					        		<span>13524</span>
					        	</div>
					        </div>
					    </el-col>
					</el-row>

					<el-row :gutter="10" class="allCountItem_row">
					    <el-col :span="12" class="allCountItem_col">
					        <div class="allCountItem_col_item">
					        	<div class="allCountItem_title">统计数据</div>
					        	<div class="allCountItem_content">
					        		<span>13524</span>
					        	</div>
					        </div>
					    </el-col>
					    <el-col :span="12" class="allCountItem_col">
					        <div class="allCountItem_col_item">
					        	<div class="allCountItem_title">统计数据</div>
					        	<div class="allCountItem_content">
					        		<span>13524</span>
					        	</div>
					        </div>
					    </el-col>
					</el-row>

  	    	    </el-col>
  	    	</el-row>
  	    </el-tab-pane>
  	</el-tabs>
  	<transition name="mask">
  		<div class="mask" v-show="isShowMask" @click="closeVControl"></div>
  	</transition>
  	<div class="VControl" v-show="isShowVControl">
  		<i class="closeBtn el-icon-circle-close" @click="closeVControl"></i>
  		<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
  		  <el-menu-item index="1">实时控制</el-menu-item>
  		</el-menu>
  		<div class="VControl_content">
  			<el-row :gutter="10" class="VControl_row">
  			    <el-col :span="17" class="VControl_col">
  			        <div class="VControl_col_item">
  			        	<el-row class="video_row1">
  			        	    <el-col class="video_col" :span="24">
  			        	        <div class="video_col_item1"></div>
  			        	    </el-col>
  			        	</el-row>
  			        	<el-row class="video_row2">
  			        	    <el-col class="video_col" :span="24">
  			        	        <div class="video_col_item2">
  			        	        	<h4>设备信息：</h4>
	  			        	        <el-row :gutter="20" class="Vdesc_row">
	  			        	            <el-col :span="12" class="Vdesc_col">
	  			        	                <div class="Vdesc_col_item">
	  			        	                	<p>型号：SBLHYBH01</p>
	  			        	                	<p>位置：学院1路</p>
	  			        	                	<p>应急联系人：王XX</p>
	  			        	                </div>
	  			        	            </el-col>
	  			        	            <el-col :span="12" class="Vdesc_col">
	  			        	                <div class="Vdesc_col_item">
	  			        	                	<p>联系方式：13525246582</p>
	  			        	                	<p>所属部门：监督中心</p>
	  			        	                	<p>职务：管理员</p>
	  			        	                </div>
	  			        	            </el-col>
	  			        	        </el-row>
  			        	        </div>
  			        	    </el-col>
  			        	</el-row>
  			        </div>
  			    </el-col>
  			    <el-col :span="7" class="VControl_col">
  			        <div class="VControl_col_item">
  			        	<div class="VControl_col_title">方向</div>
  			        	<div class="controlboard_container">
  			        		<div class="controlboard_scale">
  			        			<div class="controlboard_content_wrapper">
  			        				<div class="arrow arrowlt"></div>
		        					<div class="arrow arrowt"></div>
		        					<div class="arrow arrowrt"></div>
		        					<div class="arrow arrowr"></div>
		        					<div class="arrow arrowrb"></div>
		        					<div class="arrow arrowb"></div>
		        					<div class="arrow arrowlb"></div>
		        					<div class="arrow arrowl"></div>
		        					<div class="centerBtn"><i class="icon el-icon-refresh-left"></i></div>
  			        			</div>
  			        		</div>
  			        	</div>
  			        	<div class="VControl_col_title">速度</div>
  			        	<el-slider 
  			        	class="VControl_speed_slider"
  			        	v-model="sliderValue"
  			        	:max="10"></el-slider>
  			        	<div class="VControl_col_title">变倍</div>
  			        	<div class="VControl_chanDist">
  			        		<el-input-number v-model="chanDistNum" @change="chanDistNumChange" :min="1" :max="10" label="描述文字"></el-input-number>
  			        	</div>
  			        	<div class="VControl_col_title">聚焦</div>
						<el-button circle>1</el-button>
						<el-button circle>2</el-button>
						<el-button circle>3</el-button>
						<el-button circle>4</el-button>
						<el-button circle>5</el-button>
						<div class="manual">
							<el-input class="manual_el_input" v-model="manualInput" placeholder="手动调节"></el-input>
							<el-button :size="'mini'" @click="increase">+</el-button>
							<el-button :size="'mini'" @click="decrease">-</el-button>
						</div>
  			        </div>
  			    </el-col>
  			</el-row>
  		</div>
  	</div>
  	<transition name="mask">
  		<div class="addVideo" v-show="isShowAddVideo" @click="cancalAddToWall">
	  		<div class="addVideo_wrapper" @click.stop>
	  			<div class="videoList_header">
					设备列表
					<el-input class="videoList_header_input" type="text" suffix-icon="el-icon-search" placeholder="搜索设备"></el-input>
	  			</div>
	  			<div class="videoList">
	  				<el-checkbox-group v-model="checkboxGroup1" size="small">
	  					<el-row class="videoList_elRow">
	  						<el-col class="videoList_elCol" :span="12" v-for="(item,index) in 35" :key="index">
	  								<el-checkbox :label="index" border>
	  									<img src="../../assets/imgs/videoBgc.jpg" alt="">
	  									<div class="videoList_item">
	  										<div class="videoList_item_line">名称：学院1路摄像头</div>
	  										<div class="videoList_item_line">型号：SBLHYBH01</div>
	  										<div class="videoList_item_line">位置：学院1路</div>
	  										<div class="videoList_item_line">状态：正常</div>
	  									</div>
	  								</el-checkbox>
	  						</el-col>
	  					</el-row>
	  				</el-checkbox-group>
	  			</div>
	  			<div class="videoList_footer">
	  				<el-button type="primary" @click="addToWall">确认添加</el-button>
	  				<el-button type="default" @click="cancalAddToWall">取消</el-button>
	  			</div>
	  		</div>
	  	</div>
  	</transition>
  </div>
</template>
<script>
	import BScroll from 'better-scroll'
	import baseBarChart from '../../components/base-ChartBar.vue'
	import baseLineChart from '../../components/base-ChartLine.vue'
	import basePieChart from '../../components/base-ChartPie.vue'
	import baseScatterChart from '../../components/base-ChartScatter.vue'
	import baseRadarChart from '../../components/base-ChartRadar.vue'

	export default {
	  components: {
	  	baseBarChart,
	  	baseLineChart,
	  	basePieChart,
	  	baseScatterChart,
	  	baseRadarChart,
	  },
	  data() {
	  	return {
	  		activeName: '1',
	  		isShowMask: false,
	  		tableData1: Array(50).fill({id: 'HSC108',roadName: '学院一路',videoStatus: '正常'}),
	  		isShowVControl: false,
	  		activeIndex: '1',
	  		sliderValue: 2,
	  		chanDistNum: 2,
	  		manualInput: 1,
	  		form: '',
	  		addVideoForm: {},
	  		isShowAddVideo: false,
	  		datevalue1: "",
	  		datevalue2: "",
	  		pickerOptions1: {
	            disabledDate: (time) => {
	                if (this.datevalue2 != "") {
	                    return time.getTime() > Date.now() || time.getTime() > this.datevalue2; //大于当前日期或大于
	                } else {
	                    return time.getTime() > Date.now();
	                }
	            }
	        },
	        pickerOptions2: {
	            disabledDate: (time) => {
	                return time.getTime() < this.datevalue1 || time.getTime() > Date.now();
	            }
	        },
	        checkboxGroup1: [],

	        legendData1: ['状态1','状态2'],
	        xAxisData1: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
	        seriesDatas1: [{
	        	name: '状态1',
	        	value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8,4],
	        	type: 'bar',
	        	color: '#00e4ff',
	        }],

	        legendData2: ['状态1','状态2'],
	        xAxisData2: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
	        seriesDatas2: [{
	        	name: '状态1',
	        	value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8,4],
	        	type: 'line',
	        	color: '#b018ff',
	        }],

	        LegendData3: ['状态1','状态2','状态3','状态4','状态5','状态6'],
	        seriesDatas3: [{
            	seriesRadius: ['30%','60%'],
            	seriesCenter: ['50%','30%'],
            	seriesValue: [
            		{name: '状态1',value: 5},
    	        	{name: '状态2',value: 5},
    	        	{name: '状态3',value: 8},
    	        	{name: '状态4',value: 5},
    	        	{name: '状态5',value: 5},
    	        	{name: '状态6',value: 8},
            	]
            }],

	        legendData4: ['状态1','状态2'],
	        seriesData4: [
	        	{
	        		name: '状态1',
	        		color: '#b018ff',
	        		value: [[2,5],[5,1],[1,6],[6,9],[6,3],[3,6],[6,5],[5,1],[1,2],[2,4],[4,8],[8,4],[8,4],[4,7],[7,2],[2,3],[3,6],[6,1],[9,8],[8,4],[4,7],[7,2]]
	        	},
	        	{
	        		name: '状态2',
	        		color: '#00e4ff',
	        		value: [[2,5],[5,1],[1,6],[6,9],[9,8],[8,4],[4,7],[7,2],[2,3],[3,6],[6,1],[9,8],[8,4],[4,7],[7,2],[2,3],[3,6],[6,1],[1,7],[7,2],[2,3],[3,6]]
	        	}
	        ],

	        legendData5: ['状态1','状态2'],
	        xAxisData5: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
	        seriesDatas5: [{
	        	name: '状态1',
	        	value: [3,6,1,7,2,2,3,6,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8],
	        	type: 'bar',
	        	color: '#00e4ff',
	        },{
	        	name: '状态2',
	        	value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,2,3,6,1,7,2,3,6,3,6],
	        	type: 'line',
	        	color: '#b018ff',
	        }],

	        legendData6: ['状态1','状态2'],
	        xAxisData6: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
	        seriesDatas6: [{
	        	name: '状态1',
	        	value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8,4],
	        	type: 'bar',
	        	color: '#b018ff',
	        }],

	        legendData7: ['状态1','状态2'],
	        xAxisData7: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
	        seriesDatas7: [{
	        	name: '状态1',
	        	value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8,4],
	        	type: 'line',
	        	color: '#00e4ff',
	        }],

	        seriesName8: '雷达图',
	        indicatorData8: [
	        	{name: '状态1', max: 100},
	        	{name: '状态2', max: 100},
	        	{name: '状态3', max: 100},
	        	{name: '状态4', max: 100},
	        	{name: '状态5', max: 100},
	        	{name: '状态6', max: 100}
	        ],
	        seriesValue8: [[40,50,60,70,80,90]],

	        seriesName9: '雷达图',
	        indicatorData9: [
	        	{name: '状态1', max: 100},
	        	{name: '状态2', max: 100},
	        	{name: '状态3', max: 100},
	        	{name: '状态4', max: 100},
	        	{name: '状态5', max: 100},
	        	{name: '状态6', max: 100}
	        ],
	        seriesValue9: [[40,50,60,70,80,90]],
	  	}
	  },
	  mounted() {

	  },
	  methods: {
	  	VideoControl() {
	  		this.isShowMask = true
	  		this.isShowVControl = true
	  	},
	  	handleSelect() {

	  	},
	  	chanDistNumChange() {

	  	},
	  	increase() {
	  		if(this.manualInput<10) {
	  			this.manualInput++
	  		}
	  	},
	  	decrease() {
	  		if(this.manualInput>0) {
	  			this.manualInput--
	  		}
	  	},
	  	closeVControl() {
	  		this.isShowMask = false
	  		this.isShowVControl = false
	  	},
	  	chooVideo(){
	  		this.isShowMask = true
	  		this.isShowVControl = true
	  	},
	  	addVideo() {
	  		this.isShowAddVideo = true
	  		this.$nextTick(() => {
	  			//实现BScroll为单例
	  			if(!this.VListScorll) {
	  				this.VListScorll = new BScroll('.videoList',{
	  					mouseWheel: true,
	  					scrollbar: {
	  						fade: true,
	  						interactive: false
	  					}
	  				})
	  			} else {
	  				//让滚动条刷新，重新统计内容的高度
	  				this.VListScorll.refresh()
	  			}
	  		})
	  	},
	  	addToWall() {
	  		this.isShowAddVideo = false
	  		this.checkboxGroup1 = []
	  	},
	  	cancalAddToWall() {
	  		this.isShowAddVideo = false
	  		this.checkboxGroup1 = []
	  	},
	  	tabClick(tab) {
	  		this.$nextTick(() => {
	  			//刷新统计图表
	  			this.$refs.Chart1.refreshChart()
	  			this.$refs.Chart2.refreshChart()
	  			this.$refs.Chart3.refreshChart()
	  			this.$refs.Chart4.refreshChart()
	  			this.$refs.Chart5.refreshChart()
	  			this.$refs.Chart6.refreshChart()
	  			this.$refs.Chart7.refreshChart()
	  			this.$refs.Chart8.refreshChart()
	  			this.$refs.Chart9.refreshChart()
	  		})
	  	}
	  }
	}
</script>
<style>
	.Monitor {
		background-color: #E9EEF3;
	}
	.Monitor .mask {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
	}
	/* 过渡时的样式和时间 */
	.mask-enter-active, .mask-leave-active {
		transition: all 0.3s;
	}
	/* 进入前/消失后的样式 */
	.mask-enter, .mask-leave-to {
		opacity: 0;
	}
	.Monitor .el-tabs {
		padding-left: 20px;
		padding-right: 20px;
	}
	.Monitor .el-tabs .el-tabs__item {
		font-size: 15px;
	}
	.monitorVideo .el-main {
		background-color: #fff;
		color: #333;
		padding: 0 10px 10px 10px;
	}
	.monitorVideo .el-container {
		margin-bottom: 20px;
	}
	.monitorVideo .MVideo_LAside_title {
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		color: #409EFF;
		background-color: #fff;
		padding-left: 10px;
	}
	.monitorVideo .MVideo_LAside_content {
		height: 776px;
	}
	.monitorVideo .laside {
		margin-right: 10px;
		padding-left: 10px;
		background: #fff;
	}
	.monitorVideo .raside {
		margin-left: 10px;
		background-color: #fff;
	}
	.monitorVideo .main_wrapper {
		height: 150px;
		margin: 5px;
		border-radius: 5px;
		border: 1px solid #409EFF;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.monitorVideo .main_title {
		font-size: 13px;
		display: flex;
		justify-content: space-between;
		padding: 5px;
		border-bottom: 1px solid #409EFF;
	}
	.monitorVideo .main_content {
		width: 100%;
		flex: 1;
		background: url(../../assets/imgs/videoBgc.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.monitorVideo .main_wrapper:hover {
		box-shadow: 0px 0px 6px #409EFF;
		cursor: pointer;
	}
	.monitorVideo .main_add {
		height: 150px;
		margin: 5px;
		border-radius: 5px;
		border: 1px solid #409EFF;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50px;
		font-weight: 100;
	}
	.monitorVideo .main_add:hover {
		cursor: pointer;
		box-shadow: 0px 0px 6px #409EFF;
	}
	.raside_content .raside_content_item {
		padding-left: 15px;
		margin-bottom: 30px;
	}
	.raside_content .raside_content_item p {
		font-size: 13px;
	}
	.raside_content .raside_content_item .rtitel {
		color: #409EFF;
	}
	.raside_content .raside_warning .warningLevel {
		color: #f88976;
	}
	.VControl {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
		width: 1000px;
		height: 90%;
		border-radius: 3px;
		overflow: hidden;
	}
	.addVideo {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
		text-align: center;
	}
	.addVideo:after {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}
	.addVideo_wrapper {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
	}
	.videoList_header {
		padding: 10px 0 10px 20px;
		background-color: #fff;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.videoList_header_input {
		width: 150px;
		margin-left: 20px;
	}
	.videoList_header_input .el-input__inner {
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
	}
	.videoList_header_input .el-input__icon {
		line-height: 30px;
	}
	.videoList_elRow {
		top: 20px;
	}
	.videoList_footer {
		padding: 10px 0;
		text-align: center;
		background-color: #fff;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.videoList {
		background-color: #fff;
		padding: 20px;
		width: 750px;
		height: 500px;
		overflow: hidden;
		border-top: 1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
	}
	.videoList_elCol {
		margin-bottom: 20px;
	}
	.videoList_elCol img {
		width: 150px;
		vertical-align: middle;
	}
	.videoList_elCol label {
		height: auto!important;
	}
	.videoList_item {
		display: inline-block;
		margin-left: 10px;
		vertical-align: middle;
	}
	.videoList_item_line {
	}
	.closeBtn {
		position: absolute;
		z-index: 2;
		right: 10px;
		top: 10px;
		font-size: 30px;
		color: #C0C4CC;
	}
	.closeBtn:hover {
		cursor: pointer;
	}
	.VControl_content {
		position: absolute;
		top: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #E4E7ED;
	}
	.VControl_row {
		height: 100%;
		padding: 20px;
	}
	.VControl_row .el-col {
		height: 100%;
	}
	.VControl_row .VControl_col_item {
		height: 100%;
		overflow: hidden;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 3px;
	}
	.video_row1 {
		height: 80%;
		margin-bottom: 1%;
	}
	.video_row2 {
		height: 19%;
	}
	.video_col {
		height: 100%;
	}
	.video_col_item1 {
		height: 100%;
		background: url(../../assets/imgs/VControlbgc.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 3px;
		box-shadow: 1px 1px 1px #888;
	}
	.video_col_item2 {
		height: 100%;
		background-color: #E4E7ED;
		font-size: 12px;
		padding: 0 10px;
		overflow: hidden;
		border-radius: 3px;
		box-shadow: 1px 1px 1px #888;
	}
	.video_col_item2 h4 {
		margin: 10px 0 0 0;
	}
	.VControl_col_title {
		height: 30px;
		line-height: 30px;
		color: #88bdf3;
		font-weight: 800;
	}
	.VControl_speed_slider {
		width: 90%;
		margin: 0 auto;
	}
	.controlboard_container {
		width: 80%; /*用于控制宽度*/
		margin: 0 auto;
	}
	.controlboard_scale {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%; /*用于控制比例*/
		border-radius: 50%;
		background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
 		background-blend-mode: multiply,multiply;
		box-shadow: 0px 0px 6px #888;
	}
	.controlboard_content_wrapper {
		position: absolute;
		width: 60%;
		height: 60%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: rgba(0,0,0,0);
	}
	.controlboard_content_wrapper .centerBtn {
		width: 30%;
		height: 30%;
		border-radius: 3px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
	}
	.controlboard_content_wrapper .centerBtn .icon {
		font-size: 25px;
		font-weight: 800;
		display: inline-block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.controlboard_content_wrapper .centerBtn:hover {
		background-color: #2ad579;
		cursor: pointer;
		color: #fff!important;
	}
	.arrow:hover {
		cursor: pointer;
	}
	.arrowlt {
		background-color: rgba(255,255,255,0);
		border-top: 0 solid rgba(255,255,255,0);
		border-bottom: 20px solid rgba(255,255,255,0);
		border-left: 20px solid rgba(255,255,255,1);
		border-right: 0 solid rgba(255,255,255,0);
		position: absolute;
		top: 15px;
		left: 15px;
	}
	.arrowt {
		background-color: rgba(255,255,255,0);
		border-top: 20px solid rgba(255,255,255,1);
		border-bottom: 0 solid rgba(255,255,255,0);
		border-left: 20px solid rgba(255,255,255,0);
		border-right: 0 solid rgba(255,255,255,0);
		position: absolute;
		top: 15px;
		right: 15px;
	}
	.arrowrt {
		background-color: rgba(255,255,255,0);
		border-top: 20px solid rgba(255,255,255,0);
		border-bottom: 0 solid rgba(255,255,255,0);
		border-left: 20px solid rgba(255,255,255,1);
		border-right: 0 solid rgba(255,255,255,0);
		position: absolute;
		bottom: 15px;
		left: 15px;
	}
	.arrowr {
		background-color: rgba(255,255,255,0);
		border-top: 0 solid rgba(255,255,255,0);
		border-bottom: 20px solid rgba(255,255,255,1);
		border-left: 20px solid rgba(255,255,255,0);
		border-right: 0 solid rgba(255,255,255,0);
		position: absolute;
		bottom: 15px;
		right: 15px;
	}
	.arrowrb {
		background-color: rgba(255,255,255,0);
		border-top: 0 solid rgba(255,255,255,0);
		border-bottom: 30px solid rgba(255,255,255,1);
		border-left: 15px solid rgba(255,255,255,0);
		border-right: 15px solid rgba(255,255,255,0);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.arrowb {
		background-color: rgba(255,255,255,0);
		border-top: 15px solid rgba(255,255,255,0);
		border-bottom: 15px solid rgba(255,255,255,0);
		border-left: 0 solid rgba(255,255,255,0);
		border-right: 30px solid rgba(255,255,255,1);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.arrowlb {
		background-color: rgba(255,255,255,0);
		border-top: 15px solid rgba(255,255,255,0);
		border-bottom: 15px solid rgba(255,255,255,0);
		border-left: 30px solid rgba(255,255,255,1);
		border-right: 0 solid rgba(255,255,255,0);
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.arrowl {
		background-color: rgba(255,255,255,0);
		border-top: 30px solid rgba(255,255,255,1);
		border-bottom: 0 solid rgba(255,255,255,0);
		border-left: 15px solid rgba(255,255,255,0);
		border-right: 15px solid rgba(255,255,255,0);
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.arrowlt:hover {
		border-left-color: #2ad579!important;
	}
	.arrowt:hover {
		border-top-color: #2ad579!important;
	}
	.arrowrt:hover {
		border-left-color: #2ad579!important;
	}
	.arrowr:hover {
		border-bottom-color: #2ad579!important;
	}
	.arrowrb:hover {
		border-bottom-color: #2ad579!important;
	}
	.arrowb:hover {
		border-right-color: #2ad579!important;
	}
	.arrowlb:hover {
		border-left-color: #2ad579!important;
	}
	.arrowl:hover {
		border-top-color: #2ad579!important;
	}
	.VControl_slider {
		width: 90%;
		margin: 0 auto;
	}
	.VControl_chanDist .el-input-number {
		left: 50%;
		transform: translateX(-50%);
	}
	.VControl_col_item .el-button.is-circle {
		width: 40px;
	}
	.manual {
		width: 100%;
		margin-top: 10px;
	}
	.manual_el_input {
		width: 120px;
		margin-right: 10px;
		vertical-align: middle;
	}
	.manual .el-button {
		font-size: 20px;
		vertical-align: middle;
		width: 50px;
	}
	.addVideo_title {
		background-color: #fff;
	}
	.addVideo_form {
		padding: 0 20px 0 20px;
		background-color: #fff;
		border-radius: 3px;
		margin-bottom: 20px;
		overflow: hidden;
	}
	.Monitor .el-tabs__content {
		overflow: visible;
	}
	.currentTop_col_item {
		height: 200px;
		padding: 0 10px;
		margin-bottom: 20px;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		border-radius: 3px;
	}
	.currentTop_col_item .chartTitle {
		font-size: 14px;
		font-weight: 800;
		color: #909399;
		height: 25px;
		line-height: 25px;
	}
	.currentTop_col_item .chartWrapper {
		position: absolute;
		top: 25px;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}
	.Monitor .el-tab-pane {
	}
	.hisTr_row {
		margin-bottom: 10px;
	}
	.hisTr_col_item {
		height: 350px;
		background-color: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		position: relative;
	}
	.hisTr_col_item_title,
	.hisItem_col_item_title {
		padding-left: 10px;
		font-size: 14px;
		font-weight: 800;
		color: #909399;
		height: 30px;
		line-height: 30px;
	}
	.hisTr_col_item_ChartWrapper,
	.hisItem_col_item_ChartWrapper {
		position: absolute;
		top: 30px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.hisItem_row {
		margin-bottom: 10px;
	}
	.hisItem_col_item {
		height: 170px;
		background-color: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		position: relative;
	}
	.allCount_col_item {
		height: 250px;
		background-color: #fff;
		border-radius: 3px;
		margin-bottom: 20px;
		position: relative;
	}
	.allCountItem_row {
		margin-bottom: 10px;
	}
	.allCountItem_col_item {
		height: 120px;
		background-color: #fff;
		border-radius: 3px;
		position: relative;
	}
	.allCount_title,
	.allCountItem_title {
		padding-left: 10px;
		font-size: 14px;
		font-weight: 800;
		color: #909399;
		height: 30px;
		line-height: 30px;
	}
	.allCount_content,
	.allCountItem_content {
		position: absolute;
		top: 30px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.allCountItem_content {
		text-align: center;
	}
	.allCountItem_content:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.allCountItem_content span {
		font-size: 30px;
		vertical-align: middle;
		color: #ee8c69;
	}
	.MVideo_LAside_content .el-table th {
		padding: 5px 0;
	}
	.MVideo_LAside_content .el-table td {
		padding: 5px 0;
	}
	.MVideo_LAside_content .el-table td .el-button {
		padding: 5px 10px;
		font-size: 13px;
	}
</style>